<template>
	<view class="app-header">
		<view class="header-title" :style="{paddingTop:paddingTop+'px',height:titleHeight+'px'}">
			{{props.title}}
			<view class="header-mages">
				<navigator url="/pages/components/Message">
					<slot></slot>
				</navigator>
				<view>
					<view class="box">
						<uv-badge type="error" max="100" :value="props.warningCount"></uv-badge>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	const paddingTop = ref(0)
	const titleHeight = ref(0)
	const props = defineProps({
		title: {
			type: String,
			default: "页面标题"
		},
		warningCount: {
		    type: Number,
		    default: 0
		  }
	})

	const getHeight = () => {
		try {
			// 状态栏高度
			let systemInfo = uni.getSystemInfoSync()
			paddingTop.value = systemInfo.statusBarHeight;

			// 检查是否为小程序环境
			if (uni.getSystemInfoSync().platform === 'mp-weixin') {
				// 胶囊的高
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				titleHeight.value = menuButtonInfo.height + 6
			} else {
				// 非小程序环境可以设置默认值
				titleHeight.value = 44 // 示例默认值
			}
		} catch (error) {
			console.error('获取系统信息或胶囊按钮信息出错:', error)
		}
	}
	getHeight()
	
</script>

<style scoped>
	.app-header {
		width: 750rpx;
		height: 480rpx;
		background: url('@/static/imgs/headerBg.png');
	}

	.header-title {
		font-size: 24px;
		width: 750rpx;
		height: 50px;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.header-mages {
		position: absolute;
		bottom: 10rpx;
		left: 40rpx;
	}

	.box {
		width: 20px;
		height: 20px;
		position: absolute;
		bottom: 20rpx;
		left: 40rpx;
	}
</style>